import React, { Component } from 'react';
import { Tree, message, Spin } from 'antd';
import _ from 'lodash';
import styles from './index.less';
import Eject from '@/components/Eject';
import * as apis from '@/services/SystemMgr';
import * as utils from '../../../utils/method';

export default class SetDataJurisdiction extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedKeys: [],
      setDataJurisdictionTree: [],
      visible: false,
    };
  }

  // 数据加载
  async getDataTree(key, value) {
    const params = {
      [key]: [value],
    };
    let url;
    if (key === 'positionId') {
      url = 'getSysPositionOrgDataPermissionTreeUsingGET';
    } else if (key === 'roleId') {
      url = 'getSysRoleOrgDataPermissionTreeUsingGET';
    }
    const getTreeData = await apis[url]({ params });
    if (getTreeData || getTreeData.code === 1) {
      const setDataJurisdictionTree = utils.buildPids(getTreeData.data);
      const checkedKeys = utils.getCheckedKeys(setDataJurisdictionTree, []);
      this.setState({
        setDataJurisdictionTree,
        checkedKeys,
      });
    }
  }

  // 点击确定
  handleOkBtnClick = async (key, id) => {
    const { setDataJurisdictionTree, checkedKeys } = this.state;
    const cloneTree = _.cloneDeep(setDataJurisdictionTree);
    const paramsChecked = utils.getParamsCheckedIds(cloneTree, checkedKeys);
    let url;
    const params = {};
    if (key === 'positionId') {
      url = 'createSysPositionOrgDataPermissionUsingPOST';
      params[`${key}s`] = [id];
      params.orgIds = paramsChecked;
    } else if (key === 'roleId') {
      url = 'createSysRoleOrgDataPermissionUsingPOST';
      params[key] = id;
      params.orgids = paramsChecked;
    }
    const data = await apis[url]({ data: params });
    if (data.code === 1) {
      this.setState({
        visible: false,
      });
      message.success('设置数据权限成功！');
    }
  };

  // 点击收起
  handleOnClose = () => {
    this.setState({
      visible: false,
    });
  };

  // 点击弹出
  handleShowDrawer = () => {
    this.getDataTree(this.props.type, this.props.Id);
    this.setState({
      visible: true,
    });
    // _paq.push(['trackEvent', 'appClick', '<appName>','点击应用' ]);
  };

  // 获取选中的id
  handleGetCheckedOnCheck = checkedKeys => {
    this.setState({
      checkedKeys,
    });
  };

  render() {
    const { setDataJurisdictionTree, checkedKeys, visible } = this.state;
    return (
      <Eject
        btnType="link"
        value="设置数据权限"
        title="设置数据权限"
        width={546}
        showDrawer={this.handleShowDrawer}
        handleOkBtnClick={() => this.handleOkBtnClick(this.props.type, this.props.Id)}
        onClose={this.handleOnClose}
        visible={visible}
        modelJsx={
          <div className={styles['set-data-jurisdiction']}>
            <h3>{this.props.name}</h3>
            <div className={styles.card}>
              {setDataJurisdictionTree && setDataJurisdictionTree.length ? (
                <Tree
                  treeData={setDataJurisdictionTree}
                  defaultExpandedKeys={['00000001']}
                  checkable
                  onCheck={this.handleGetCheckedOnCheck}
                  checkedKeys={checkedKeys}
                />
              ) : (
                <Spin tip="请求中..."></Spin>
              )}
            </div>
          </div>
        }
      />
    );
  }
}
